<template>
    
    <div id="popup" ref="pop" >
        <div class="header" @mousedown="popmove">
            <div>更新事件</div>
            <div id="close" @click="del">X</div>
        </div>
        <table>
            <tr>
                <td>事件编号</td>
                <td>{{ list.事件编号 }}</td>
            </tr>
            <tr>
                <td>事件类型</td>
                <td>
                    {{ list.事件类型 }}
                </td>
            </tr>
            <tr>
                <td>事件等级</td>
                <td>{{ list.事件等级 }}</td>
            </tr>
            <tr>
                <td>发生时间</td>
                <td>{{ list.发生时间 }}</td>
            </tr>
            <tr>
                <td>发生地点</td>
                <td>{{ list.发生地点 }}</td>
            </tr>
            <tr>
                <td>车牌号</td>
                <td>{{ list.车牌号 }}</td>
            </tr>
            <tr>
                <td>驾驶员</td>
                <td>{{ list.驾驶员 }}</td>
            </tr>
            <tr>
                <td>处理状态</td>
                <td v-if="list.处理状态 == 0">待处理</td>
                <td v-if="list.处理状态 == 1">处理中</td>
                <td v-if="list.处理状态 == 2">已归档</td>
                <td v-if="list.处理状态 == 6">待处理</td>
                <td v-if="list.处理状态 == 4">处理中</td>
                <td v-if="list.处理状态 == 90">已归档</td>
            </tr>
            <tr>
                <td>修改状态</td>
                <td>
                    <select class="message" v-model="stat">
                        <option value="free" selected disabled hidden>{{ list.处理状态 }}</option>
                        <option value="6">待处理</option>
                        <option value="4">处理中</option>
                        <option value="90">已归档</option>
                    </select>
                </td>
            </tr>
        </table>
        <div class="choose">
            <div class="add" @click="add">提交</div>
            <div class="del" @click="del">取消</div>
        </div>
    </div>
</template>

<script setup>
import { inject, onMounted, ref, watch } from "vue";
import { getFeaturePosition } from "./update/getFeaturePosition"
import { query } from "./update/queryPoint"
import { gisquery } from "./update/MapgisQuery"
import { updatapoint } from "./update/Point"
import { useMenuStore } from "../../store/index"
import{setMarkerStyle} from "./update/setMarkerStyle"

let $store = useMenuStore()
let $map
let $docLayer
let list = ref([])         //显示属性列表
let updatelist = ref()     //mapgis格式数据（获取FID）
let useposition = ref()    //获取要更改属性的点的坐标
let service = {
    name: "guanggu-doc",
    layerId: 2
}
let stat = ref() //状态
let pop = ref();
// 创建画笔画布
const source = new ol.source.Vector({});
const layer = new ol.layer.Vector({
    source,
});
// 创建画笔
let draw = new ol.interaction.Draw({
    type: "Point",
    source,
});
let data = ref()

onMounted(() => {
    $map = inject("$map")
    $docLayer = inject("$docLayer")
    $map.addLayer(layer);
})

function getpop(e) {
    $map.removeLayer(player);
    let position = e.coordinate
    query({
        position,
        service,
        callback: res => {
            data.value = res
        }
    })
    let center = e.coordinate; //经纬转像素
    let pixel = $map.getPixelFromCoordinate(center); //经纬度转屏幕坐标

    // 弹窗位置
    pop.value.style.left = pixel[0] + "px";
    pop.value.style.top = pixel[1]+ 90 + "px";
    // 判定弹窗显隐
    if (data.value && $store.activeIndex == "2-3") {
        pop.value.style.display = "flex";
    } else {
        pop.value.style.display = "none";
    }
}

/*鼠标移动到要素上,鼠标样式改变 */
function getposition(e) {
    let position = e.coordinate

    //实时获取鼠标在地图上的经纬度
    query({
        position,
        service,
        callback: res => {
            data.value = res
        }
    })
    //判定是否改变鼠标样式
    if (data.value && $store.activeIndex == "2-3") {
        $map.getTargetElement().style.cursor = "pointer"
         
    } else {
        $map.getTargetElement().style.cursor = "default"
        $map.removeLayer(layer);
    }
}

draw.on("drawend", handledraw)
// 获取画笔点击的坐标

function handledraw(evt) {
    let position = getFeaturePosition(evt.feature)
    //查询属性信息
    query({
        position,
        service,
        callback: res => {

            useposition.value = res[0].geometryChangeKey_.target.flatCoordinates
            list.value = res[0].values_.values_
        }
    })
    //查询FID
    gisquery({
        position,
        service,
        callback: res => {
            updatelist.value = res
        }
    })
}
// 点击后标注
let player
watch(()=>useposition.value,val=>{
    if(val){
        console.log(useposition.value)
        let point = new ol.Feature({
            geometry: new ol.geom.Point([useposition.value[0], useposition.value[1]])
        })
        const icon = setMarkerStyle('src/assets/location.png')
        point.setStyle(icon)
        const source = new ol.source.Vector({
            features: [point]
        })
        player = new ol.layer.Vector({
            source
        })
        $map.addLayer(player)
    }
})
// 更改状态属性
const add = () => {
    let attr = [
        { name: "处理状态", type: "number", value: stat.value }
    ]
    // 样式
    let POINST_STYLE = {
        Angle: 0,
        Color: stat.value, //子图颜色
        Space: 0,
        SymHeight: 5,//高度
        SymWidth: 5, //宽度
        SymID: 21,//子图号
    }
    let fid = updatelist.value.SFEleArray[0].FID
    let position = useposition.value
    //调用更新函数
    updatapoint(fid, position, attr, service, POINST_STYLE)
    pop.value.style.display = "none";
    $map.removeLayer(layer);
    $map.removeLayer(player);
    $docLayer.refresh();
}
// 关闭弹窗
const del = () => {
    pop.value.style.display = "none";
    $map.removeLayer(layer);
    $map.removeLayer(player);
    
}

//控制显隐
watch(() => $store.activeIndex, val => {
    if (val == "2-3") {
        $map.addInteraction(draw);
        $map.on('pointermove', getposition);
        // popup弹窗
        $map.on("click", getpop);
    } else {
        $map.removeInteraction(draw);
        pop.value.style.display = "none";
        $map.removeLayer(layer);
        $map.removeLayer(player);
        $map.un('pointermove', getposition);
        // popup弹窗
        $map.un("click", getpop);
    }
})

// 挪动pop弹窗
let back = ref()
const popmove = () => {

  document.onmousemove = (el) => {

    let mouseX = el.clientX
    let mouseY = el.clientY

    pop.value.style.left =mouseX+ "px";
  pop.value.style.top = mouseY  + "px";
  }
  document.onmouseup = () => {

    document.onmousemove = null;
  };
}
</script>

<style scoped>

#popup {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
    height: 320px;
    position: fixed;
    z-index: 3000;
    top: 20px;
    left: 30px;
    background-color: #fff;
    border-radius: 5px;
    display: none;
    gap: 10px;
}

table {
    width: 90%;
}

td {
    height: 20px;
    font-size: 15px;
    text-align: center;
    border: 1px solid rgb(194, 190, 190);
}

.header {
    color: #fff;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 35px;
    width: 100%;
    background-color: rgb(71, 77, 241);
    border-radius: 5px 5px 0px 0px;
}

.choose {
    display: flex;
    gap: 30px;
}

.add {
    width: 50px;
    border-radius: 5px;
    text-align: center;
    background-color: aqua;
}

.del {
    width: 50px;
    border-radius: 5px;
    text-align: center;
    border: 1px solid rgb(194, 190, 190);
}

#close {
    width: 20px;
    color: cadetblue;
}

#close:hover {
    cursor: pointer;
}

.add:hover {
    cursor: pointer;
}

.del:hover {
    cursor: pointer;
}

.message {
    width: 90%;
}
</style>